<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="/public/bootstrap.min.css">
  <link rel="stylesheet" href="/public/bootstrap-icons-141.css">
  <link rel="stylesheet" href="/public/style-light.css">
  
  <script src="/public/jquery.min.js"></script>
  <script src="/public/dayjs.min.js"></script>
  <script src="/public/bootstrap.bundle.min.js"></script>
  <script src="/public/clipboard.min.js"></script>
  <script src="/public/util.js"></script>
  
  <title>Add Files - localtags</title>
</head>
<body>
  <div id="root" class="container" style="max-width: 775px; min-width: 400px;"></div>
<script>

const Alerts = CreateAlerts();

const [InfoBtn, InfoMsg] = CreateInfoPair('使用说明', m('ul').append([
  m('li').text('由于浏览器无法直接打开文件夹，请手动打开 waiting 文件夹。'),
  m('li').text('点击右上角 new note 图标可在 waiting 文件夹里快速创建 markdown 笔记。'),
]));

const Navbar = {
  view: () => m('nav').addClass('navbar navbar-light bg-light').append([
    m('div').addClass('container-fluid').append([
      m('a').attr({title:'back to home',href:'/light/home',type:'button'})
        .addClass('btn btn-outline-dark').append(m('i').addClass('bi bi-arrow-left')),
      m('span').addClass('PageTitle navbar-brand').append([
        'Add Files', ' ', m(InfoBtn),
      ]),
      m('a').attr({title:'new note',type:'button',href:'/light/md-new'})
        .addClass('btn btn-outline-dark').append(m('i').addClass('bi bi-file-earmark-plus')),
    ]),
  ]),
};

const WaitingFolder = cc('span');
const CopyBtn = cc('i', 'copy');
const Main = cc('div', null, [
  m(WaitingFolder),
  ' ',
  m(CopyBtn).attr({title:'copy'}).addClass('bi bi-stickies').css({cursor:'pointer'}),
  m('div').addClass('alert alert-primary my-4').attr({role:'alert'}).text(
    '请把需要上传的文件，放进如上所示的文件夹中，再点击下面的 Next 链接。'
  ),
  m('p').addClass('text-center').append(
    m('a').text('Next').attr({href: '/light/waiting'}).addClass('fs-5'),
  ),
]);

$('#root').append([
  m(Navbar).addClass('mt-2 mb-5'),
  m(InfoMsg).hide(),
  m(Loading),
  m(Alerts).addClass('mb-3'),
  m(Main).hide(),
]);

init()

function init() {
  ajax({method:'GET',url:'/api/waitingFolder',alert:Alerts},
    (resp) => {
      // onSuccess
      $(Main.id).show();
      const folderPath = resp.message;
      $(WaitingFolder.id).text(folderPath).attr({href:folderPath});
    }, null, () => {
      // onAlways
      Loading.hide();
    });
}

const clipboard = new ClipboardJS('#copy', {
  text: () => { return $(WaitingFolder.id).text(); }
});
clipboard.on('success', () => {
  Alerts.insert('success', '复制成功, 浏览器无法直接打开文件夹');
});
clipboard.on('error', e => {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
  Alerts.insert('danger', '复制失败，详细信息见控制台');
});

</script>
</body>
</html>